@font-face {
    font-family: "Iconify Explorer Font";
    src: url("../icons/search.svg") format("svg");
    src: url("../icons/left.svg") format("svg");
    src: url("../icons/share.svg") format("svg");
    src: url("../icons/right.svg") format("svg");
    src: url("../icons/user.svg") format("svg");
    src: url("../icons/roundback.svg") format("svg");
    src: url("../icons/cart.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
body{
    background-color: #fbfbfb;
}
.line{
    width: 100%;
    border-top: 1vw solid #f0f2f1;
    margin-top: 3vw;
}
.container{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    top:0;
    left:0;
    flex-wrap: wrap;
}
.container .header{
    min-height:12vw;
    min-width:100vw;
    background-color: #fbfbfb;
    top:0;
    left:0;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: solid 1px #f0f2f1;
    flex-direction: row;
}
.container .header .back{
    width: 6vw;
    display: flex;
    justify-content: left;
    position: fixed;
    left: 6vw;
    top: 1.6vh;
    align-items: center;
    content: url("../icons/left.svg");
}
.container .header .item{
    max-width: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
}
.container .header2{
    height:9vw;
    margin-top: 10vw;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    background-color: #fbfbfb;
}
.container .header2 .item{
    width: 25vw;
    height: 8vw;
    font-size: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .header2 .itemchosen{
    width: 25vw;
    height: 8vw;
    font-size: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
}
.container .main {
    height: 85%;
    width: 98%;
    background-color: #ddd;
    margin-bottom: 10vw;
    margin-top: 20vw;
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.container .main .itembox{
    max-width: 95vw;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction:column ;
    background-color: #ddd;
    row-gap: 4vw;
}
.container .main .noitembox{
    max-width: 95vw;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction:column ;
    background-color: #fbfbfb;
    row-gap: 4vw;
}
.container .main .noitembox .noitem{
    width: 97vw;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10vw;
    row-gap: 4vw;
}
.container .main .noitembox .noitem img{
    width: 25vw;
    height: 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2vw;
}
.container .main .noitembox .noitem .noitemtitle{
    width: 95vw;
    height: 5vw;
    display: flex;
    font-size: 4vw;
    justify-content: center;
    align-items: center;
}
.container .main .itembox .item{
    width: 98vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    background-color:#fff;
    margin-left: -3vw;
    border-radius: 2vw;
}
.container .main .itembox .item .itemhead{
    min-width: 97vw;
    display: flex;
    justify-content: space-between;
    color: #2d2d2d;
    height: 8vw;
    align-items: center;
}
.container .main .itembox .item .itemhead .itemid{
    width: 43vw;
    height: 8vw;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 4vw;
    margin-left: 4vw;
}
.container .main .itembox .item .itemhead .status{
    width: 43vw;
    height: 8vw;
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: 4vw;
}
.container .main .itembox .item .itembody{
    width: 100%;
    height: 38vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    row-gap: 1vw;
}
.container .main .itembox .item .itembody .p2{
    max-width: 100vw;
    min-width: 95vw;
    height: 38vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction:row;
}
.container .main .itembox .item .itembody .p2 .left{
    max-width: 24vw;
    max-height: 24vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.container .main .itembox .item .itembody .p2 .left img{
    max-width: 24vw;
    max-height: 24vw;
}
.container .main .itembox .item .itembody .p2 .middle{
    max-width: 55vw;
    max-height: 24vw;
    display: flex;
    justify-content: left;
    justify-items: left;
    align-items:flex-start;
    flex-direction: column;
}
.container .main .itembox .item .itembody .p2 .middle .itemtitle{
    max-width: 52vw;
    max-height: 10vw;
    min-width: 52vw;
    min-height: 10vw;
    font-size: 3.5vw;
    display: flex;
    justify-content: left;
    overflow: hidden;
}
.container .main .itembox .item .itembody .p2 .middle .vendor{
    max-width: 19vw;
    min-width: 19vw;
    max-height: 6vw;
    min-height: 6vw;
    font-size: 3.5vw;
    display: flex;
    justify-content: center;
    justify-items: left;
    align-items: center;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    text-align: left;
    margin-top: 1.5vh;
}
.container .main .itembox .item .itembody .p2 .right{
    max-width: 20vw;
    min-width: 20vw;
    max-height: 28vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.container .main .itembox .item .itembody .p2 .right .price{
    max-width: 20vw;
    min-width: 20vw;
    max-height: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .main .itembox .item .itembody .p2 .right .quantity{
    max-width: 20vw;
    min-width: 20vw;
    max-height: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .main .itembox .item .exp{
    max-width: 95vw;
    margin-left: 4vw;
    height: 4vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container .main .itembox .item .exp .expf{
    min-width: 95vw;
    height: 2vh;
    display: flex;
    justify-content: left;
    align-items: center;
}
.container .main .itembox .item .exp .expn{
    min-width: 95vw;
    height: 2vh;
    display: flex;
    justify-content: left;
    align-items: center;
}
.container .main .itembox .item .paybox{
    min-width: 97vw;
    min-height: 7vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container .main .itembox .item .paybox .itemprice{
    width: 48vw;
    height: 8vw;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 4vw;
    margin-left: 4vw;
}
.container .main .itembox .item .paybox .pay{
    min-width: 19vw;
    min-height: 7vw;
    background-color: dodgerblue;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 10vw;
    margin-right: 3vw;
}
.container .dltpanel {
    position: fixed;
    top: 35vh;
    left: 10vw;
    display: flex;
    min-width: 80vw;
    max-width: 80vw;
    min-height: 30vh;
    max-height: 30vh;
    background-color: #ccc;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 2vh;
    column-gap: 2vh;
}
.container .dltpanel .x{
    min-width: 8vw;
    max-width: 8vw;
    max-height: 8vw;
    display: flex;
    position: fixed;
    top: 36vh;
    left: 80vw;
    content: url("../icons/xmark.svg");
}
.container .dltpanel .title{
    min-width: 80vw;
    min-height: 4vh;
    font-size: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top:40vh;
    left: 11vw;
    position: fixed;
}
.container .dltpanel .buttons{
    min-width: 80vw;
    min-height: 5vh;
    top:54vh;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1vw;
    column-gap: 2vw;
    margin-left: -1vw;
}
.container .dltpanel .buttons .confirm{
    min-width: 35vw;
    min-height: 5vh;
    background-color:red ;
    border-radius: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .dltpanel .buttons .cancel{
    min-width: 35vw;
    min-height: 5vh;
    background-color:darkseagreen ;
    border-radius: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
}